import { InboxOutlined } from '@ant-design/icons';
import { Upload } from 'antd';
import { RcFile } from 'antd/lib/upload';
import React, { useEffect } from 'react';
import { StepProps } from '.';

const { Dragger } = Upload;

const Content: React.FC<StepProps> = ({ onStepDataUpdated }) => {
    useEffect(() => {
        onStepDataUpdated(null);
    }, [onStepDataUpdated]);

    const beforeUpload = (file: RcFile, FileList: RcFile[]) => {
        const reader = new FileReader();
        reader.addEventListener(
            "load",
            () => onStepDataUpdated(reader.result),
            false,
        );

        if (file) {
            reader.readAsText(file);
        }

        return false;
    };

    return (
        <Dragger multiple={false} beforeUpload={beforeUpload} style={{ height: "200px" }}>
            <p className="ant-upload-drag-icon"><InboxOutlined /></p>
            <p className="ant-upload-text">点击或拖拽文件到此区域进行上传</p>
            <p className="ant-upload-hint">仅限上传任务模板文件。请勿上传非任务模板文件。</p>
        </Dragger>
    );
};

export default Content;